<?xml version='1.0' encoding='UTF-8' standalone='yes'?>
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>城南棋牌管理系统</title>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
	integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
	crossorigin="anonymous">
<link rel="shortcut icon" href="favicon.ico">
<link href="../static/css/bootstrap.min.css"
	th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
<link href="../static/css/font-awesome.min.css"
	th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
<link href="../static/css/main/animate.min.css"
	th:href="@{/css/main/animate.min.css}" rel="stylesheet" />
<link href="../static/css/main/style.min862f.css"
	th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
	integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
	crossorigin="anonymous"></script>
<!--<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>-->
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>-->
<link rel="shortcut icon"
	href="https://www.dbschema.com/images/favicon.ico">
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>

<style type='text/css'>
body {
	font-family: 'Segoe UI', 'Lucida sans', Dialog;
	font-size: 13px;
	background-color: #f5f5f5;
	margin: 10px;
}
</style>


<script type="text/javascript">
	
	function updateZt(target){
	 	var text = target.innerText;
		if(text==' 预约'){
			document.getElementById(target.id).innerHTML= "<i class=\"fa fa-circle text-success\"></i> 在线"
			var time2 = new Date().Format("yyyy-MM-dd hh:mm:ss"); 
			document.getElementById("sj"+target.id).innerHTML= time2;
				//更新表状态 插入日志信息
				$.ajax({
    				url: "/web/tRoominfo/updateRoom",
    				data: 
    				{id:target.id,
    				 zt:'在线'	
    				},
    				cache: false,
    				type: 'POST',
    				dataType: "json",
    				success: function (result) {
    				}
    			});
			
		}else if(text==' 空闲'){
			document.getElementById(target.id).innerHTML= "<i class=\"fa fa-circle text-success\"></i> 在线"
			var time2 = new Date().Format("yyyy-MM-dd hh:mm:ss"); 
			document.getElementById("sj"+target.id).innerHTML= time2;
			//更新表状态 插入日志信息
				$.ajax({
    				url: "/web/tRoominfo/updateRoom",
    				data: 
    				{id:target.id,
    				 zt:'在线'	
    				},
    				cache: false,
    				type: 'POST',
    				dataType: "json",
    				success: function (result) {
    				}
    			});
		}
		
		
	}
	
	//更新房间状态 如果为空闲状态 则更改为预约 否则弹出详情页面
	function updateYyZt(target){
		var id = target.id.replace('fjh','');
		var text = document.getElementById(id).innerText;
		var fjh = document.getElementById(target.id).innerText;
		if(" 空闲"==text){
			document.getElementById(id).innerHTML= "<i class=\"fa fa-circle text-warning\"></i> 预约"
				//更新表状态 插入日志信息
				$.ajax({
    				url: "/web/tRoominfo/updateRoom",
    				data:{id:id,
    				 zt:'预约'	
    				},
    				cache: false,
    				type: 'POST',
    				dataType: "json",
    				success: function (result) {
    				}
    			});
		}else if(" 预约"==text){
			return;
		}else if(" 在线"==text){
			
			 layer.open({
                 type: 2,
         		 maxmin: true,
                 shade: 0.3,
                 title: "房间",
                 fix: false,
                 area: ['900px',  '500px'],
                 content: "/web/tRoomBill/edit2?fjh="+fjh,
                 btn: ['结账', '关闭'],
         		 // 弹层外区域关闭
         		 shadeClose: true,
         		 yes: function(index, layero) {
         			$.modal.confirm("确定" + fjh + "结账？", function() {
         	           var iframeWin = layero.find('iframe')[0];
         	           iframeWin.contentWindow.submitHandler(index, layero);
         			});
         	     },
         	     cancel: function(index) {
         	        return true;
         	     }
             });
			 
			 
		}
		
		
	}
	
	
	
	
	Date.prototype.Format = function (fmt) { // author: meizz
	    var o = {
	        "M+": this.getMonth() + 1, // 月份
	        "d+": this.getDate(), // 日
	        "h+": this.getHours(), // 小时
	        "m+": this.getMinutes(), // 分
	        "s+": this.getSeconds(), // 秒
	        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
	        "S": this.getMilliseconds() // 毫秒
	    };
	    if (/(y+)/.test(fmt))
	        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	    for (var k in o)
	        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	            return fmt;
	}
	
	
	
	
</script>

</head>

<body class="gray-bg">
	<div class='card'>
		<div class='card-block'>
			<a name='qrtz_calendars'
				style='cursor: pointer; text-align: center; line-height: 300px;'><h4
					class='card-title' style="font-size: 50px">城南棋牌</h4></a>
			<table class='table-sm table-bordered'>
				<tbody style="width: 100%">
					<tr th:each="s:${tRoominfoList2}">
						<td style="width: 30%; text-align: center; line-height: 30px; font-size: 30px">
							<a th:id="'fjh' + ${s.id}" onclick="updateYyZt(this)"
							name='qrtz_calendars.sched_name' th:text="${s.fjh}"></a>
						</td>
						<td style="width: 20%"><a th:id="${s.id}"
							onclick="updateZt(this)" th:if="${s.zt}=='预约'"> <i
								class="fa fa-circle text-warning"></i> 预约</a><a th:id="${s.id}" onclick="updateZt(this)" th:if="${s.zt}=='空闲'">
								<i class="fa fa-circle text-danger"></i> 空闲</a>
								<a th:id="${s.id}" onclick="updateZt(this)" th:if="${s.zt}=='在线'">
								<i class="fa fa-circle text-success"></i> 在线</a><span th:id="'sj' + ${s.id}" style="margin-left: 30px; font-size: 15px" th:text="${s.kssj}"></span>
						</td>
						<td></td>
						<td style="width: 30%; text-align: center; line-height: 30px; font-size: 30px">
						<a th:id="'fjh' + ${s.id2}" onclick="updateYyZt(this)"
							name='qrtz_calendars.sched_name' th:text="${s.fjh2}"></a>
						</td>
						<td style="width: 20%"><a th:id="${s.id2}" onclick="updateZt(this)" th:if="${s.zt2}=='预约'">
							<i class="fa fa-circle text-warning"></i> 预约</a>
							<a th:id="${s.id2}" onclick="updateZt(this)" th:if="${s.zt2}=='空闲'">
							<i class="fa fa-circle text-danger"></i> 空闲</a>
							<a th:id="${s.id2}" onclick="updateZt(this)" th:if="${s.zt2}=='在线'">
							<i class="fa fa-circle text-success"></i> 在线</a><span th:id="'sj' + ${s.id2}" style="margin-left: 30px; font-size: 15px" th:text="${s.kssj2}"></span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>
